CSS - 基础 | Tian'notes

CSS 规则由两部分组成，选择器和声明。选择器是用于告知浏览器，要对 HTML 的哪个元素设置样式。声明由 key-value 键值对组成，用于描述样式。

CSS 声明总是以 ; 结束，声明组以 {} 括起来：

p {
  color:red;
  text-align:center;
}

CSS 位于 HTML 文档的 <head> <style> 标签内，如下：

<!DOCTYPE html>
<html>
<head>
  <title>CSS 样式</title>
  <meta charset="utf-8">
  <style type="text/css">
      p {
          font-size: 20px;
          color: red;
      }
      h1, h2, h3 {
          font-size: 30px;
          color: #666666;
      }
  </style>
</head>
<body>
  <h1>CSS 层叠样式</h1>
  <h2>CSS 层叠样式</h2>
  <p>用于定义 HTML 内容在浏览器中显示的样式</p>
</body>
</html>

Style 标签

<style> 标签用于为 HTML 文档定义样式信息。在 <style> 中，您可以规定在浏览器中如何呈现 HTML 文档。

type 属性是必需的，定义 <style> 元素的内容。唯一可能的值是 text/css，<style> 元素位于 <head> 部分中。<style> 标签还有一个可选的属性 media，如下：

值	描述
screen	计算机屏幕（默认值）。
tty	使用等宽字符网格的媒介，如电传打字机。
tv	低分辨率、有限的屏幕翻滚能力，如电视。
projection	放映机。
handheld	手持设备（小屏幕、有限的带宽）。
print	打印预览模式 / 打印页。
braille	盲人用点字法反馈设备。
aural	语音合成器。
all	适合所有设备。

media 属性用于为不同的媒介类型规定不同的样式。如需在一个 <style> 元素中定义一个以上的媒介类型，请使用逗号分隔的列表：

1	<style type="text/css" media="screen,projection">

所有主流浏览器都支持 media 属性的 screen、print 以及 all 值，Opera 同时支持 handheld 值。

引用 CSS 样式

引用 CSS 样式有以下四种方法：

行内样式，也称为内联样式；
内部样式表，也称为嵌入样式；
外部样式表；
导入式；

行内样式

行内样式是指在开始标签内添加 style 样式属性，如下：

1	<p style="font-size: 30px; color: blue">定义 p 标签的内容在浏览器中显示的样式</p>

内部样式

内部样式是指 CSS 样式代码写在 <head> <style> 里面。

<head>
  <title>CSS 样式</title>
  <meta charset="utf-8">
  <style type="text/css">
      p {
          font-size: 20px;
          color: red;
      }
  </style>
</head>

外部样式

把 CSS 样式代码写在独立的，扩展名为 .css 的文件，引用方法如下：

1
2
3

<head>
  <link rel="stylesheet" type="text/css" href="css.css">
</head>

导入式

<head>
  <title>CSS 样式</title>
  <meta charset="utf-8">
  <style type="text/css">
      @import url(css.css);
  </style>
</head>

CSS 文件引入方法区别

类别	引入方法	位置	加载时机
行内样式	`style` 属性	html 文件内	同时
内部样式	`<head> <style>`	html 文件内	同时
外部样式	`<head> <link>`	css 文件	同时
导入式	`<head> <style>`	css 文件	HTML 加载后

CSS 使用方法优先级

链入外部样式表与内部样式表之间的优先级取决于位置的先后，最后定义的优先级最高，也就是就近原则。

1	行内样式 > 内部样式 > 外部样式